<template>
	<view>
		<view class="" style="height: 350rpx;">
			<progressBar :progress_txt="countResult.progress_txt"></progressBar>
		</view>
		
		<view class="" style="text-align: center;padding: 30rpx;font-weight: 700;border-bottom: 1rpx solid #f5f5f5;font-size: 32rpx;">答题卡</view>
		<view class="">
			<view class="" style="padding: 20rpx;border-bottom: 1rpx solid #f5f5f5;">
				<view class="" style="display: flex;align-items: center;justify-content: space-around;font-size: 26rpx;">
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">
							{{dataList.length}}
						</view>
						<view class="" style="">
							试题数量
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="color: #0089ff;font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">
							{{countResult.success}}
						</view>
						<view class="">
							答对试题
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="color: #f84d27;font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">
							{{countResult.error}}
						</view>
						<view class="">
							答错试题
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<view class="" style="color: #f84d27;font-weight: 700;font-size: 30rpx;margin-bottom: 10rpx;">
							{{countResult.weinum}}
						</view>
						<view class="">
							未答试题
						</view>
					</view>
				</view>
			</view>
			<scroll-view class="topic-list" style="height: 700rpx;" scroll-y="">
				<view class="list-box h-flex-x h-flex-wrap h-flex-6">
					<view class="list-item" v-for="(item, index) in dataList" :key="index" @tap="pickerTopic(index)">
						<view
							class="h-flex-x h-flex-center "
							:class="{
								success1: item.answerResult && item.answer == item.answerResult,
								error1: item.answerResult && item.answer != item.answerResult
							}"
						>
							{{ index + 1 }}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import progressBar from '../../components/chocolate-progress-bar/chocolate-progress-bar.vue'
	export default {
		data() {
			return {
				dataList:[],
				progress_txt:0
			};
		},
		components:{
			progressBar
		},
		onLoad(option) {
			this.dataList = JSON.parse(decodeURIComponent(option.dataList));
			console.log(this.dataList);
			// this.dataList=uni.getStorageSync('dataList')
		},
		computed: {
			// 结果统计
			countResult() {
				let [success, error] = [0, 0];
				this.dataList.forEach(item => {
					if (item.answerResult) {
						console.log(item.answerResult, item.answer, 666);
						if (item.answerResult == item.answer) {
							success++;
						} else {
							error++;
						}
					}
				});
				let progress_txt=((success/this.dataList.length)*100).toFixed(2)
				let weinum=this.dataList.length-success-error
				return {
					success,
					error,
					progress_txt,
					weinum
				};
			}
			
		},
		methods:{
			pickerTopic(index){
				uni.navigateTo({
					url:`/pages/paperlist/reslutDetail/reslutDetail?dataList=${encodeURIComponent(JSON.stringify(this.dataList))}&indexId=${index}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import 'lib/helang-flex.scss';
	
.topic-list {
	height: 600rpx;

	.list-box {
		padding: 20rpx 20rpx 0 20rpx;
		font-size: 28rpx;
		color: #666;

		.list-item {
			padding-bottom: 20rpx;

			> view {
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				border: #ddd solid 1px;
				border-radius: 50%;
				margin: 0 auto;

				&.active {
					border: #0089ff solid 1px;
				}

				&.success {
					background-color: #dbf2ff;
					color: #0089ff;
					border: none;

					&.active {
						border: #0089ff solid 1px;
					}
				}
				&.success1 {
					background-color: #0089ff;
					color: #fff;
					border: none;
				}

				&.error {
					background-color: #ffeceb;
					color: #f84d27;
					border: none;

					&.active {
						border: #f84d27 solid 1px;
					}
				}
				&.error1 {
					background-color: red;
					color: #fff;
					border: none;
				}
			}
		}
	}
}
</style>
